<?php echo $header;?>

<div class="container-fluid">
    <div class="row">
        <?php echo $slide_common;?>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

            <h2 class="page-header"></h2>
            <div id="example">
                <div id="grid"></div>

                <script>
                    $(document).ready(function () {
                        $("#grid").kendoGrid({
                            dataSource: {
                                type: "odata",
                                transport: {
                                    read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                                },
                                pageSize: 20
                            },
                            height: 550,
                            groupable: true,
                            sortable: true,
                            pageable: {
                                refresh: true,
                                pageSizes: true,
                                buttonCount: 5
                            },
                            columns: [{
                                field: "ContactName",
                                title: "Contact Name",
                                width: 200
                            }, {
                                field: "ContactTitle",
                                title: "Contact Title"
                            }, {
                                field: "CompanyName",
                                title: "Company Name"
                            }, {
                                field: "Country",
                                width: 150
                            }]
                        });
                    });
                </script>
                @if (ViewBag.ShowDescription)
                {
                <div class="box">
                    <h4>Description</h4>
                    <p>The Kendo UI grid is a powerful widget which allows you to visualize and edit data via its table representation. It provides a variety of options about how to present and perform operations over the underlying data, such as paging, sorting, filtering, grouping, editing, etc. To feed the grid with data, you can supply either local or remote data via the Kendo UI DataSource component, used as a mediator.</p>
                    <br/>
                    <p>
                        There are two possible ways to instantiate a Kendo UI grid:
                    </p>
                    <ol>
                        <li>From an empty div element. In this case all the Grid settings are provided in the initialization script statement.</li>
                        <li>From an existing HTML table element. In this case some of the Grid settings can be inferred from the table structure and elements HTML attributes.</li>
                    </ol>
                    <br/>
                    <p>In both cases the grid is registered as a jQuery plugin</p>
                    <br/>
                    <p>In this demo you can see how you can easily configure the grid to display data and perform sorting, paging and grouping operations via its built-in settings. </p>
                    <br/>
                    <p>Additional information about how to use the Kendo UI grid widget can be found in <a href="http://docs.telerik.com/kendo-ui/web/grid/introduction" target="_blank">this section</a> of the product documentation.</p>
                </div>
                }
            </div>
        </div>
    </div>
</div>

<?php echo $footer;?>